<template>
  <div class="hello">
    <div class="header" @click="backGo">
      <img src="../assets/backIcon.png">
      <span class="curtitle">资讯详情</span>
    </div>
    <div v-if="!listloading">
        <div class="hellolist">
          <div class="title">
            <h2 class="mainTitle red tcenter">
              {{list.title}}
            </h2>
            <h4 class="subtitle tcenter">{{list.qikan}}</h4>
            <div class="footTitle">
              <h4 class="department">{{list.danwei}}</h4>
              <h4 class="time">{{list.riqi}}</h4>
            </div>
          </div>
          <div class="content">
            <div class="contentText" v-html="list.neirong"></div>
            <table class="m_b_20 m_t_15">
              <caption class="tcenter m_all_10">表1 浒苔区概述</caption>
              <thead>
              <tr>
                <th>浒苔区域</th>
                <th>中心位置</th>
                <th>面积（km2）</th>
                <th>形状描述</th>
                <th>置信度</th>
                <th>建议核查</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in list.chtablelist">
                <td>{{item.xtqy}}</td>
                <td>{{item.zxwz}}</td>
                <td>{{item.mj}}</td>
                <td>{{item.xzms}}</td>
                <td>{{item.zxd}}</td>
                <td>{{item.jyhc}}</td>
              </tr>
              </tbody>
            </table>
            <div  class="m_tb_10">
              <p v-for="item in list.chimglist" style="margin:10px 0">
                <img :src="item.imgs" alt="">
              </p>
            </div>
          </div>

          <div class="footer">
            <p>制作：{{list.zzr}}</p>
            <p>审核:{{list.shr}}</p>
            <p>签发：{{list.qfr}}</p>
          </div>

        </div>
    </div>

    <!--loading-->
    <div class="loading-container" v-show="listloading">
      <loading></loading>
    </div>
  </div>
</template>

<script>
 import Loading from './loading/loading'
 import {ajaxGet1,GetRequest} from '@/api/index'

export default {
  name: 'detail',
  components:{
    Loading
  },
  data () {
    return {
      list:'',
      listloading:true,
      id:''
    }
  },
  created(){
      this.id=GetRequest('id');
      if(this.id){
        this.getData();
      }
  },
  methods:{
    backGo(){
        //返回列表页
       this.$router.back(-1)
    },
    getData(){
        const param=[
          {key:'id',val:this.id}
        ];

       ajaxGet1(param).then((res)=>{
           this.list=res.data.data;
           this.listloading=false;
       })
     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header{
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgb(53,57,60);
    height: 45px;
  }
  .header img{
    width: 25px;
    margin-right: 15px;
  }

  .header .curtitle{
    color: #fff;
    font-size:1.2rem;
  }
  .hello{
    padding-top:45px;
  }
  .footTitle,.footer{
    display: flex;
    justify-content: space-between;
    width:100%
  }

  .footer>p{
    width:33.3%;
    text-align: center;
    margin:0;
  }
  .title{
    border-bottom: 1.5px solid red;
  }
  .hellolist>div{
    margin:15px 0;
  }
</style>
